import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Image, Text, TouchableOpacity, View, BackHandler, ToastAndroid, Platform, PanResponder, Linking } from "react-native";
import WebView from "react-native-webview";
import axios from "axios";
import Orientation from 'react-native-orientation-locker'; // 引入横屏锁定函数
import { useNavigation } from "@react-navigation/native";
import FloatButton from "@/components/FloatButton";

const PlatformVedioScreen = (props: any) => {
    const {
        title,
        url,
        icon
    } = props.route.params;

    const [webUrl, setWebUrl] = useState(url);

    const webViewRef = useRef<any>(null);
    const [waitAnalysisObj, setWaitAnalysisObj] = useState<any>({});
    const [buttonPosition, setButtonPosition] = useState({ x: 0, y: 0 });
    const [analysisUrl, setAnalysisUrl] = useState("https://www.yemu.xyz/?url=");
    const [analysisingFlag, setAnalysisingFlag] = useState(false);

    const navigation = useNavigation<any>();

    const analysis = async () => {
        setWebUrl(analysisUrl + waitAnalysisObj.url);
        Orientation.lockToLandscape(); // 设置横屏
        setAnalysisingFlag(true)
    };

    useEffect(() => {
        const backAction = () => {
            webViewRef?.current.goBack();
            return true;
        };

        const backHandler = BackHandler.addEventListener(
            'hardwareBackPress',
            backAction
        );

        return () => backHandler.remove();
    }, []);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: true,
        });
    }, [navigation]);


    return (
        <View style={{ flex: 1 }}>
            <WebView
                // 设置ua为电脑pc
                // userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
                ref={webViewRef}
                source={{
                    uri: webUrl
                }}
                // 监听网页滚动
                onScroll={(e) => {
                    console.log("监听网页滚动", e.nativeEvent.contentOffset.y);
                }}
                // 监听网页其他事件
                onMessage={(e) => {
                    console.log("监听网页其他事件", e.nativeEvent.data);
                }}
                // 监听网页返回
                onNavigationStateChange={(e) => {
                    console.log("监听网页返回", e);
                    setAnalysisingFlag(false)
                    setWaitAnalysisObj(e)
                    Orientation.unlockAllOrientations()
                    if (e.canGoForward) {
                        navigation.setOptions({
                            headerShown: true,
                        });
                    }

                }}
                // 监听网页发出的横屏事件
                onOrientationChange={(e: any) => {
                    console.log("监听网页发出的横屏事件", e);
                }}
                // 强制在webview中打开新页面 不跳转外部浏览器
                onShouldStartLoadWithRequest={(event) => {
                    console.log("onShouldStartLoadWithRequest", event);
                    if (event.url.startsWith('http://') || event.url.startsWith('https://')) {
                        return true;
                    } else {
                        // Linking.openURL(event.url);
                        return false;
                    }
                }}
            />

            {/* 悬浮的按钮 右下角 可拖动*/}
            {
                !webUrl.includes(analysisUrl) && !analysisingFlag && <FloatButton
                    icon="解析"
                    size={60}
                    color="#5E7CE2"
                    glowColor="rgba(94, 124, 226, 0.5)"
                    textColor="#C3E4FF"
                    initialPosition={{ right: 30, bottom: 300 }}
                    onPress={() => {
                        console.log('点击了悬浮按钮');
                        navigation.setOptions({
                            headerShown: false,
                        });
                        analysis();
                    }}
                />

            }
        </View>
    );
};

export default PlatformVedioScreen;